<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 0.6rem">名称</span>
                        <el-input
                            v-model="search_name"
                            placeholder="请输入名称"
                            style="width: 2rem"
                            @keyup.enter="search"></el-input>
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                    <el-button type="success" @click="addnew">新增</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <el-table
                        :data="tabledata"
                        style="width: 100%; margin-bottom: 20px"
                        row-key="id"
                        default-expand-all>
                        <el-table-column prop="materialName" label="名称" />
                        <el-table-column prop="price" label="单价" />
                        <el-table-column prop="isdel" label="状态">
                            <template #default="scope">
                                <div>
                                    <el-tag
                                        type="success"
                                        v-if="scope.row.isdel == 1">
                                        正常
                                    </el-tag>
                                    <el-tag type="danger" v-else>禁用</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="350px">
                            <template #default="scope">
                                <el-button
                                    @click="detail(scope.row)"
                                    type="primary"
                                    size="small">
                                    详情
                                </el-button>
                                <el-button
                                    @click="edit(scope.row)"
                                    type="success"
                                    size="small">
                                    修改
                                </el-button>
                                <el-button
                                    @click="dongjie(scope.row)"
                                    type="warning"
                                    size="small">
                                    {{ scope.row.isdel == 1 ? "禁用" : "启用" }}
                                </el-button>
                                <el-button
                                    @click="detelerow(scope.row)"
                                    type="danger"
                                    size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <addtype ref="tcbox"></addtype>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";
import addtype from "./addtype.vue";
//新增弹出----------

let tcbox = ref<any>(null)
const addnew = () => {
    tcbox.value.showflag = true;
};
//新增弹出end------------------

//详情-----------------------------
const detail = (row: any) => {
    post({
        url: "/api/types/details",
        data: {
            id: row.id,
        },
    }).then((res: any) => {
        tcbox.value.showflag = true;
        tcbox.value.isedit = false;
        tcbox.value.title = "分类详情";
        tcbox.value.ruleForm.materialName = res.data.materialName;
        tcbox.value.ruleForm.price = res.data.price;
        tcbox.value.ruleForm.sort = res.data.sort;
    });
};
//详情end--------------------------

//修改-----------------------------
const edit = (row: any) => {
    post({
        url: "/api/types/details",
        data: {
            id: row.id,
        },
    }).then((res: any) => {
        tcbox.value.showflag = true;
        tcbox.value.isedit = true;
        tcbox.value.title = "编辑分类";
        tcbox.value.ruleForm.materialName = res.data.materialName;
        tcbox.value.ruleForm.price = res.data.price;
        tcbox.value.ruleForm.sort = res.data.sort;
        tcbox.value.ruleForm.id = res.data.id;
    });
};
//修改end--------------------------

//冻结----------------
const dongjie = (row: any) => {
    let texttip =
        row.isdel == 1 ? "您确定禁用该分类吗？" : "您确定启用分类吗？";
    console.log(row);
    ElMessageBox.confirm(texttip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/api/types/edit",
            data: {
                id: row.id,
                isdel: row.isdel == 1 ? 2 : 1,
            },
        }).then((res: any) => {
            ElMessage.success("操作成功!");
            getdata();
        });
    });
};
//冻结end------------

//删除----------------
const detelerow = (row: any) => {
    ElMessageBox.confirm("确定删除该分类吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/api/types/del",
            data: {
                ids: row.id
            },
        }).then((res: any) => {
            ElMessage.success("删除成功!");
            getdata();
        });
    });
};
//删除end-------------

//搜索字段
let search_name = ref("");
let search_type = ref(0);
//定义表头的数据
interface User {
    id: number;
    materialName: string;
    price: string;
    unitName: string;
    isdel: number;
    hasChildren?: boolean;
    children?: User[];
}
let tabledata: User[] = ref([]);

// 在 onMounted 钩子中发送请求
onMounted(() => {
    getdata();
});

const getdata = () => {
    post({
        url: "/api/types/index",
        data: {
            materialName: search_name.value, //搜索名称
            p: 1, //当前页数
            size: 9999, //每页显示数量
        },
    }).then((res: any) => {
        tabledata.value = res.data;
        console.log(tabledata);
    });
};
const search = () => {
    getdata();
};
const reset = () => {
    search_name.value = "";
    search_type.value = 0;
    getdata();
};

provide("getdata", getdata);
</script>

<style lang="scss" scoped>
@import url("../../index.scss");
:deep(.el-table .el-table__cell) {
    padding: 14px 0;
}
</style>
